<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #app {
            width: 80%;
            margin: 30px auto;
        }

        .item {
            float: left;
            width: 200px;
            height: 300px;
            border: 1px solid rosybrown;
            margin: 5px;
        }

        .item img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="search">
            <div>
                搜索:<input type="text" v-model="key" />
            </div>
            <div>类别：
                <input type="radio" value="" v-model="type" />全部
                <input type="radio" value="1" v-model="type" />服装
                <input type="radio" value="2" v-model="type" />鞋子
                <input type="radio" value="3" v-model="type" />箱包
                <input type="radio" value="4" v-model="type" />美妆
            </div>
            <div>
                排序字段 :<input type="radio" value="id" v-model="sort" />编号
                <input type="radio" value="goodsprice" v-model="sort" />价格
            </div>
            <div>
                排序方式: <input type="radio" value="asc" v-model="order" /> 从小大
                <input type="radio" value="desc" v-model="order" />从大到小
            </div>
            <div>
                价格区间 <input v-model="start" />到<input v-model="end" />
            </div>

        </div>
        <div class="table">
            <div class="item" v-for="item in  list">
                <!-- <img :src="item.goodsimg" /> -->
                <p>{{item.goodsname}}</p>
                <p>商品价格{{item.goodsprice}} 商品数量{{item.goodsnum}}</p>
            </div>

        </div>
        <div class="page">
            <button @click="prev">上一页</button>
            <button @click="next">下一页</button>
        </div>

    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data: {
            order: "asc",//排序方式
            sort: "id",//排序字段
            key: "",//搜索的关键字
            type: "",//商品的类别
            list: [],//商品列表
            start: "",//开始
            end: "",//结束
            limit:3,//每页显示三条数据
            page:1,//默认显示第一页
            total:100,//默认有100条数据

        },
        watch: {
            key() {//搜索的关键字发生改变的时候触发
                this.search();
            },
            type() {//当type发生改变的时候 就触发
                //查询
                this.search();
            },
            order() {//排序方式改变了 重新请求
                this.search();
            },
            sort() {//排序字段改变了 重新请求
                this.search();
            },
            start() {
                this.search();
            },
            end() {
                this.search();
            },
            page(){
                this.search();
            }
        },
        methods: {
            prev(){
                this.page--;
            },
            next(){
                this.page++;
            },
            async search() {
                //有个bug  点全部的时候 type为 ""
                let params = {
                    q: this.key,//q:query  会查询 所有的字段里面 如果包含了key的值 都会返回
                    _sort: this.sort,
                    _order: this.order,
                    _limit:this.limit,
                    _page:this.page
                };
                if (this.type) {
                    params.type = this.type
                }

                if (this.start) { //需要查询价格 比start大的内容
                    params.goodsprice_gte = this.start * 1;
                }
                if (this.end) {
                    params.goodsprice_lte = this.end * 1;
                }

                let { data: list } = await axios({
                    method: "get", url: "http://localhost:2345/goodsinfos", params
                })
                //
                this.list = list;
            }
        },
        async created() {//页面加载的时候 请求所有数据
            let { data: list } = await axios({
                method: "get",
                url: "http://localhost:2345/goodsinfos",
                params: {
                    _order: "asc",
                    _sort: "id",
                    // goodsprice_gte:300,
                    // goodsprice_ne:300
                    _limit:3,//每页显示三条数据
                    _page:1,//表示显示第一页

                }
            })
            this.list = list;
        }
    })

</script>

</html>